<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css"/>
    <link type="text/css" rel="stylesheet" href="../css/public.css"/>
    <link type="text/css" rel="stylesheet" href="../element-ui/index.css">
    <style>
        body {
            background-color: white;
        }

        #data-empty {
            color:gray;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="bill_list">
    <div class="location">
        <strong>你现在所在的位置是:</strong> <span>订单管理页面</span>
    </div>
    <div class="search">
        <form method="get">
            <input name="method" value="query" class="input-text" type="hidden">
            <span>商品名称：</span> <input id="productName">
            <span>供应商：</span>
            <select id="providerId">
                <option value="0">--请选择--</option>
                <option v-for="provider in providerList" v-bind:value="provider.id">
                    {{provider.proName}}
                </option>
            </select>
            <span>是否付款：</span>
            <select id="isPayment">
                <option value="0">--请选择--</option>
                <option value="1">未付款</option>
                <option value="2">已付款</option>
            </select> <input value="查 询" type="button" id="searchbutton" @click="search()">
            <a href="bill_add.html">添加订单</a>
        </form>
    </div>
    <!--账单表格 样式和供应商公用-->
    <el-table
            :data="billList"
            stripe
            border
            style="width: 100%">
        <el-table-column label="封面" width="80px">
            <template slot-scope="scope">
                <el-image
                        style="height:60px; width:60px"
                        v-bind:src="scope.row.img == null ? '../images/default.png' : '../upload/' + scope.row.img"
                ></el-image>
            </template>
        </el-table-column>
        <el-table-column prop="billCode" label="订单编号"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="proName" label="供应商"></el-table-column>
        <el-table-column prop="totalPrice" label="订单金额"></el-table-column>
        <el-table-column prop="isPayment" label="是否付款">
            <template slot-scope="scope">
                {{scope.row.isPayment == 1? "未付款" : "已付款"}}
            </template>
        </el-table-column>
        <el-table-column prop="creationDate" label="创建时间"></el-table-column>
        <el-table-column label="操作">
            <a href="#"><el-image src="../images/xiugai.png" alt="修改" title="修改"></el-image></a>
            <a href="#" e><el-image src="../images/schu.png" alt="删除" title="删除"></el-image></a>
        </el-table-column>
    </el-table>

    <div v-if="count==0" id="data-empty">
        暂无数据
    </div>

    <el-pagination :current-page="page"
                   :page-size="size"
                   :total="count"
                   layout="total, prev, pager, next, jumper"
                   @current-change="change">
    </el-pagination>

    <!--点击删除按钮后弹出的页面-->
    <div v-show="isDel" class="remove" id="removeBi">
        <div class="removerChid">
            <h2>提示</h2>
            <div class="removeMain">
                <p>你确定要删除该订单吗？</p>
                <a href="#" id="yes" @click="yes()">确定</a> <a href="#" id="no" @click="no()">取消</a>
            </div>
        </div>
    </div>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<!--element-ui是依赖于vue的，所以得先引入vue.js-->
<script src="../element-ui/index.js"></script>
<script>

    var vue = new Vue({
        el: "#bill_list",
        data: {
            billList: [], //订单列表
            providerList: [], //供应商列表
            count: 0, //总数
            page: 1, //当前页数
            size: 5, //每页行数
            totalPage: 0, //总页数
            productName: "", //订单名字
            providerId: 0, //供应商ID
            isPayment: 0, //是否付款
            isDel:false, //删除页面显示标识
        },
        created() {
            //加载供应商列表
            this.loadData_providers();
            //加载供应商列表
            this.loadData_bills();
        },
        methods: {
            //加载供应商下拉列表
            loadData_providers(){
              var url = "../provider/findAll";
              axios.get(url)
                .then(response => {
                    this.providerList = response.data.data;
                    console.log(this.providerList);
                })
                .catch(error => {
                    console.log(error);
                })
            },

            //加载订单列表
            loadData_bills() {
                var url = "../bill/findPage/" + this.page + "/" + this.size;
                var data = {
                    "productName": this.productName,
                    "providerId": this.providerId,
                    "isPayment": this.isPayment,
                }
                axios.get(url, {params: data})
                    .then(response => {
                        //获取订单列表
                        this.billList = response.data.data.list;
                        //获取总行数
                        this.count = response.data.data.count;
                        //计算总页数
                        this.totalPage = Math.ceil(this.count / this.size);
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },

            //切换页码
            change(page) {
                this.page = page;
                //重新加载订单列表
                this.loadData_bills()
            },

            //条件查询
            search() {
                this.productName = $("#productName").val();
                this.providerId = $("#providerId").val();
                this.isPayment = $("#isPayment").val();
                //重新加载用户列表
                this.loadData_bills();
            },

            //删除订单
            del(){
                this.isDel = true;
                console.log("hahahaha")
            }
        }
    })
</script>
</body>
</html>